<template>
	<view class="component flex" @click="handleClick">
		<image class="image" :lazy-load="true" :src="detail.image" mode="aspectFill" />
		<view class="content left-10 flex">
			<view class="title txtsHidden">{{ detail.title }}</view>
			<view class="timeWrap flex font10">
				<view class="time col-grey">{{ detail.startTime }}~{{ detail.endTime }}</view>
				<view class="signBtn col-fff" :class="{'bg-error': detail.signStatus === 0, 'bg-theme': detail.signStatus === 1, 'bg-error-opacity': detail.signStatus === 2}" @click.stop="handleSign">
					{{ detail.signStatus === 0 ? '报名' : detail.signStatus === 1 ? '已报名' : '已结束' }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	detail: {
		type: Object,
		default: {}
	}
})

const emit = defineEmits(['sign']);

//点击跳转详情
function handleClick() {
	uni.navigateTo({
		url: `/pages/products/active/detail?activeId=${props.detail.id}`
	})
}

// 报名
function handleSign() {
	if(props.detail.signStatus === 1 || props.detail.signStatus === 2) {
		uni.$u.toast(props.detail.signStatus === 1 ? '已报名' : '已结束');
		return;
	}
	emit('sign', props.detail);
}
	
</script>

<style lang="scss" scoped>
.component{
	margin: 28rpx;
	align-items: stretch;
	.image{
		width: 180rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}
	.content{
		width: calc(100% - 200rpx);
		flex-direction: column;
		justify-content: space-between;
		.title{
			width: 100%;
		}
		.timeWrap{
			width: 100%;
			justify-content: space-between;
			.signBtn{
				color: #FFFFFF;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
			}
		}
	}
}
</style>
